<script setup lang="ts">
import { theme, legacyLogicalPropertiesTransformer } from 'ant-design-vue'
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { Select } from 'ant-design-vue'
import store from '@/store'

Select.props.getPopupContainer.default = (trigger) => trigger.parentNode
Select.props.optionFilterProp = {
  default: 'label',
  type: String
}

const t = reactive({
  theme: 'defaultAlgorithm',
  color: {
    colorPrimary: '#165DFF',
    colorDanger: '#f53f3f',
    borderRadius: 2,
    colorTextBase: '#000',
    colorPrimaryHover: '#4080FF',
    colorPrimaryBg: '#E8F3FF'
  }
})

const dataListener = (data: any) => {
  const { theme, color, setTheme, platformId, token } = data
  // console.log(platformId, token)
  t.theme = theme
  t.color = color
  setTheme(theme, color)

  store.userStore.platformId = platformId
  store.userStore.token = token
}

onMounted(() => {
  window.microApp?.addDataListener(dataListener, true)
})

onUnmounted(() => {
  window.microApp?.removeDataListener(dataListener)
})
</script>

<template>
  <a-style-provider
    prefixCls="my"
    hash-priority="high"
    :transformers="[legacyLogicalPropertiesTransformer]"
  >
    <a-config-provider
      :locale="zhCN"
      :theme="{
        algorithm: theme[t.theme],
        token: t.color
        // components: store.userStore.components
      }"
    >
      <router-view></router-view>
    </a-config-provider>
  </a-style-provider>
</template>

<style scoped></style>
